<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入读者系统</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>

    </style>
</head>
<body style="background-color: #2C3E50">
<div style="position: absolute;width: 100%;height: 99%;display: flex;align-items: center;justify-content: center">

    <div style="padding: 10px;background-color: white;height: 99%;width: 33%;display: flex;justify-content: center;align-items: start">
        <form id="infoForm" class="layui-form" action="" style="margin: 20px 0;">
            <div id="" style="width: 100%;font-size: 30px;text-align: center;margin-bottom: 40px;">基本信息</div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input id="reader_name" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input id="reader_school_number" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="">
                <label class="layui-form-label">读者ID</label>
                <div class="layui-input-block">
                    <input id="reader_id" type="text" disabled="disabled" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学籍号</label>
                <div class="layui-input-block">
                    <input id="reader_username" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input id="reader_sex" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input id="reader_phone" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者生日</label>
                <div class="layui-input-block">
                    <input id="reader_birthday" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input id="reader_id_card" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮政编号</label>
                <div class="layui-input-block">
                    <input id="reader_mail" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者邮箱</label>
                <div class="layui-input-block">
                    <input id="reader_email" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系地址</label>
                <div class="layui-input-block">
                    <input id="reader_address" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input id="reader_remarks" type="text" name="title" required disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>

    <div style="border:solid #000 1px;padding: 10px;background-color: white;height: 50%;display: flex;align-items: center;width: 33%;justify-content: center">
        <form class="layui-form" action="" style="margin: 20px 0;">
            <div id="bigMsg" style="width: 100%;font-size: 30px;text-align: center;margin-bottom: 40px;">准备录入</div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者卡号</label>
                <div class="layui-input-block">
                    <input id="reader_rfid" type="text" name="title" required disabled="disabled" lay-verify="required"
                           placeholder="请刷卡" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div style="width: 100%;margin-top: 40px;display: flex;justify-content: space-between">
                <div id="btnStart" class="layui-btn layui-btn-disabled">开始</div>
                <div id="btnStop" class="layui-btn layui-btn-danger layui-btn-disabled">停止</div>
            </div>
        </form>
    </div>

    <div style="padding: 10px;background-color: white;height: 99%;width: 33%;display: flex;justify-content: center;align-items: start">
        <form id="initFrom" class="layui-form" action="" style="margin: 20px 0;">
            <div id="" style="width: 100%;font-size: 30px;text-align: center;margin-bottom: 40px;">初始化参数</div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者角色</label>
                <div class="layui-input-block">
                    <select id="reader_roles_id" lay-verify="required">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者状态</label>
                <div class="layui-input-block">
                    <select id="reader_state_id" lay-verify="required">


                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者密码</label>
                <div class="layui-input-block">
                    <input id="reader_password" type="text" name="reader_password" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可借次数</label>
                <div class="layui-input-block">
                    <input id="reader_loan_num" type="text" name="reader_loan_num" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">读者学校</label>
                <div class="layui-input-block">
                    <input id="reader_employer" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">有效日期</label>
                <div class="layui-input-block">
                    <input id="reader_limited_time" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">充值金额</label>
                <div class="layui-input-block">
                    <input id="reader_recharge_amount" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可预借数</label>
                <div class="layui-input-block">
                    <input id="reader_yujie_number" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可续借数</label>
                <div class="layui-input-block">
                    <input id="reader_xujie_number" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预借有效期</label>
                <div class="layui-input-block">
                    <input id="reader_yujie_date" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">书刊默认借阅天数</label>
                <div class="layui-input-block">
                    <input id="reader_jieyue_date" type="text" name="" lay-verify="required" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>

        </form>
    </div>

    <div style="position:absolute;bottom: -10px;border-top: solid red 1px;width: 100%;background-color: white;padding: 40px 0"
         id="statusLine;">
        <div style="display: flex;justify-content: space-around;font-size: 20px">
            <div>本次录入数：<span id="thisReaderCount"></span></div>
            <div>已录入数：<span id="updatedReaderCount"></span></div>
            <div>未录入：<span id="NotUpdatedReaderCount"></span></div>
            <div>所有读者：<span id="AllReaderCount"></span></div>
            <div>消息：<span id="message">准备录书</span></div>
            <div>连接状态：<span id="connectionStatus"></span></div>
        </div>
    </div>
</div>
<audio id="player1">
    <source src="http://zjlt.sc.chinaz.com/files/download/sound1/201403/4204.mp3"/>
</audio>
<audio id="player2">
    <source src="http://zjlt.sc.chinaz.com/Files/DownLoad/sound1/201611/8023.mp3"/>
</audio>
<script>
    $("#btnStart").click(function () {
        var index;
        if ($("#reader_loan_num").val() == "") {
            layer.alert("可借次数为必填项！");
            return;
        }
        $.ajax({
            url: 'startImportReader',
            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#btnStart").addClass("layui-btn-disabled");
                    $("#btnStop").removeClass("layui-btn-disabled");
                    layer.close(index);
                    $("#bigMsg").css("color", "#00CD00");
                    $("#thisReaderCount").html("0");

                }
            },
            async: true
        });
    });


    $("#btnStop").click(function () {
        var index;
        $.ajax({
            url: 'CloseReaderCardDervice',
            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    layer.close(index);
                    $("#reader_rfid").val("");
                    $("#bigMsg").html("准备录入");
                    $("#bigMsg").css("color", "#000");
                    $("#btnStart").removeClass("layui-btn-disabled");
                    $("#btnStop").addClass("layui-btn-disabled");

                }
            },
            async: true
        });
    });
</script>
<script>
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getIPandPort',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://" + ip + ":" + port + "/sokect");
    ws.onopen = function () {
        console.log("连接成功")
        $("#connectionStatus").html("连接成功");
        $("#btnStart").removeClass("layui-btn-disabled");

    }
    var t;
    var d = {};
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        console.log(msg);
        if (msg.from == "importReader") {
            $("#reader_rfid").val(msg.sUid);
            $("#reader_rfid").css("color", "red");
            //插入的ajax请求
            t = $('#initFrom input');
            $.each(t, function () {
                d[this.id] = this.value;
            });
            d['reader_state_id'] = $("#reader_state_id").val();
            d['reader_roles_id'] = $("#reader_roles_id").val();
            d['reader_rfid'] = $("#reader_rfid").val();
            d['reader_id'] = $("#reader_id").val();
            $.ajax({
                url: 'updateReaderByReader_id',
                async: false,
                data: d,
                type: "post",
                success: function (res) {

                    if (res.statusCode == 0) {
                        $("#AllReaderCount").html(res.AllReaderCount);
                        $("#NotUpdatedReaderCount").html(res.NotUpdatedReaderCount);
                        $("#message").html(res.msg);
                        $("#thisReaderCount").html(res.thisReaderCount);
                        $("#updatedReaderCount").html(res.updatedReaderCount);
                        $("#bigMsg").html("录入成功，请放下一张卡");
                        var player = $("#player1")[0];
                        /*jquery对象转换成js对象*/
                        getLastReader();
                        $("#reader_rfid").val("");
                        player.play();
                    } else {
                        var player = $("#player2")[0];
                        /*jquery对象转换成js对象*/
                        player.play();
                        $("#message").html(res.msg);
                        $("#message").css("color", "red");
                        $("#bigMsg").html(res.msg);
                    }
                }
            });
            // var player = $("#player2")[0]; /*jquery对象转换成js对象*/
            // player.play();
        }
    };
    ws.onclose = function () {
        console.log("连接已关闭...");
        $("#connectionStatus").html("断开连接");
        $("#bigMsg").html("断开连接");
        $("#message").html("断开连接");
        $("#bigMsg").css("color", "#000");
        $(".layui-btn").addClass("layui-btn-disabled");
    };
</script>
<script>
    $.ajax({
        url: 'getAllReaderCount',
        async: false,
        success: function (res) {
            $("#AllReaderCount").html(res.AllReaderCount);
            $("#updatedReaderCount").html(res.updatedReaderCount);
            $("#thisReaderCount").html(res.thisReaderCount);
            $("#NotUpdatedReaderCount").html(res.NotUpdatedReaderCount);
            for (var i = 0; i < res.readerRoleList.length; i++) {
                //角色列表
                $("#reader_roles_id").append('<option value=' + res.readerRoleList[i].reader_roles_id + '>' + res.readerRoleList[i].reader_roles_name + '</option>');
            }
            for (var i = 0; i < res.readerStatusList.length; i++) {
                //角色状态列表
                $("#reader_state_id").append('<option value=' + res.readerStatusList[i].reader_state_id + '>' + res.readerStatusList[i].reader_state_name + '</option>');
            }
            $("#message").html(res.msg);
        }
    });
    getLastReader();

    function getLastReader() {
        $("#infoForm input").val("");
        $.ajax({
            url: 'getOneReaderForNotReaderCardID',
            async: false,
            success: function (res) {
                console.log(res);
                if (res == "") {
                    $("#bigMsg").html("没有读者信息");
                    $("#message").css("color", "red");
                    $("#bigMsg").css("color", "red");
                    $("#btnStart").addClass("layui-btn-disabled");
                    $("#message").html("没有读者信息");
                    layer.alert("没有读者信息");
                } else {
                    $("#bigMsg").html("准备录入");
                    //参数
                    $("#reader_name").val(res.reader_name);
                    $("#reader_school_number").val(res.reader_school_number);
                    $("#reader_username").val(res.reader_username);
                    $("#reader_phone").val(res.reader_phone);
                    $("#reader_birthday").val(res.reader_birthday);
                    $("#reader_id_card").val(res.reader_id_card);
                    $("#reader_mail").val(res.reader_mail);
                    $("#reader_email").val(res.reader_email);
                    $("#reader_address").val(res.reader_address);
                    $("#reader_remarks").val(res.reader_remarks);
                    $("#reader_sex").val(res.reader_sex);
                    $("#reader_id").val(res.reader_id);
                }
            }
        });
    }
</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>